<template>
	<view class="top_bar">
		<p class="p1">音</p>
		<p class="p2">乐</p>
		<p class="p3">电</p>
		<p class="p4">台</p>
		<span>...</span>
	</view>
</template>
 
<script>
	export default {
		name: '',
		data(){
			return {
				
			}
		},
		methods:{
			
		}
	}
</script>
 
<style lang="less" scoped>
	.top_bar {
		padding: 20px 0 10px 15px;
		color: #eb4d4b;
		border-bottom: 1px solid #eb4d4b;
		font-size: 40upx;
		font-weight: 700;
		p {
			display: inline-block;
			letter-spacing: 10px;
			animation-name: move;
			animation-duration: 3s;
			animation-timing-function: ease-in-out;
			animation-iteration-count: infinite;
		}
		.p2 {
			animation-delay: .5s;
		}
		.p3 {
			animation-delay: 1s;
		}
		.p4 {
			animation-delay: 1.5s;
		}
	}
	@keyframes move {
		0% {
		
		}
		50% {
			transform: translateY(-10px);
		}
		100% {
		}
	}
	
</style>
